<template>
	<view>
		<view class="posi-f carc2 c9 f22" :style="[{bottom:carBtm+'rpx',background:'#F6F6F6'}]">
			<!-- 满减 -->
		<!-- 	<view v-show="!showCar&&mjInfo.discount.length" class="mjts cartopmj cf5f">
				<text v-if="cartList.length||!mjInfo.discount.length">{{mjInfo.text}}</text>
				<block v-else>
					<text v-for="(v,i) in mjInfo.discount" :key='i'>满{{v.fullMoney}}减{{v.money}}<text
							v-if="i<mjInfo.discount.length-1" class="m01">,</text></text>
				</block>
			</view> -->
			<view class="car posi-r f-row">
				<view @click="openCar" class="f-g-1 carb f-row" style="background: #F0F0F0;">
					<view class="carb-img posi-r f-c animated" :class="{'bounceIn':cartList.length}">
						<view class="cartimg">
							<text class="iconfont iconspgl cartIcon"/>
						</view>
						<view class="posi-a dot bsf f-c" v-if="cartList.length" :style="{background:tColor}">
							{{getTotal.num}}
						</view>
					</view>
					<view class="f-c-xc ml30" :class="{'cf':qsText.reach}">
						<view>
							<text v-if="cartList.length" class="f34 c0">{{sl+getTotal.total}}</text>
							<text v-else class="f28">未选购商品</text>
							<!-- <text v-if="carPrice.reduceMoney>0" class="ml10 t-d-l">{{sl+getTotal.total}}</text> -->
						</view>
					</view>
				</view>
				<view @click="goStatement" class="f-g-0 carf f-c cf"
					:style="{background:qsText.reach?ztqs:'#999',border:qsText.reach1?`1rpx solid ${tColor}`:'',}">
					<view class="f28" :class="{'c0 wei':qsText.reach}">{{qsText.text}}</view>
					<!-- <sq-btn @refresh='goPay()' v-else :storeid='sjxx.shopData.id' :cname="`f32 cf`" h='105' :t='qsText.text'></sq-btn> -->
				</view>
			</view>
		</view>
		<!-- 购物车弹窗:style="{background:`rgba(${colorToRGB(tColor)},0.5)`}" -->
		<mg-popup v-model="showCar">
			<view class="o-h" style="border-radius: 30rpx 30rpx 0 0;">
			<!-- 	<view v-show="mjInfo.discount.length" class="mjts cf5f">
					<text v-if="cartList.length||!mjInfo.discount.length">{{mjInfo.text}}</text>
					<block v-else>
						<text v-for="(v,i) in mjInfo.discount" :key='i'>满{{v.fullMoney}}减{{v.money}}<text
								v-if="i<mjInfo.discount.length-1" class="m01">,</text></text>
					</block>
				</view> -->
				<view class="cartListc p03 bf">
					<mg-cell isl='1' cname='p30'>
						<view slot='bd' class="f-y-c f24">
							<text>已选商品</text>
						</view>
						<view @click="$emit('clearCart')" class="f-y-c f24 c6" slot='ft'><text
								class="iconfont iconsc f24 mr10 c6"></text>清空购物车</view>
					</mg-cell>
					<scroll-view class="p0 carbody" scroll-y>
						<mg-cell v-for="(v,i) in cartList" :key="i" w='136' h='136' :img='v.icon' brs='5rpx'
							cname='p30 la124' :last="i==cartList.length-1">
							<template slot='bd'>
								<view class="t-o-e f30">{{v.name}}</view>
								<view class="f24 c9 f-raw">
									<text class="" v-if="v.groupName">{{v.groupName}}</text>
									<text v-if="v.attribute">({{v.attribute}})</text>
									<text class="ml10" v-if="v.materialName">+{{v.materialName}}</text>
								</view>
								<view class="f-x-bt mt10">
									<view class="f-g-0 f30" :style="{color:gstyle.priceColor}">{{sl+itemTotal(v)}}
									</view>
									<add-goods :isprice='0' :showspec='false' addwz='2'
										@add='add($event,v)' @dec='dec($event,v)' :co='v' cname="f-g-0 mt10">
									</add-goods>
								</view>
							</template>
						</mg-cell>
					</scroll-view>
					<!-- <view class="f-y-c p30 hlt f30">
					<view style="width: 156rpx;">包装费</view>
					<view>
						<view v-show="getTotal.bzf>=0" @click="go({t:1,url:'/yb_o2ov2/shop/out/bzf'})">
							<text class="">{{sl+getTotal.bzf}}</text>
							<text class='iconfont iconwen f24 m01'></text>
						</view>
						<view class="f20 c9">包装费不参与满减</view>
					</view>
				</view> -->
				</view>
			</view>
		</mg-popup>
	</view>
</template>

<script>
	import mgPopup from '@/components/common/popup.vue'
	import util from '@/common/utils.js'
	import AddGoods from './AddGoods.vue'
	export default {
		components:{
			mgPopup,
			AddGoods
		},
		props:{
			cartList:{
				type:Array,
				default:function(){
					return []
				}
			},
			cartData:{
				type:Object,
				default:function(){
					return {
						carCount: 0,
						carMoney: "0"
					}
				}
			},
			tableId:{
				type:[String,Number],
				default:function(){
					return 0
				}
			}
		},
		data(){
			return{
				gstyle:{
					priceColor:'#000000',
					goodIcon:'',
					noGoodIcon:''
				},
				carBtm:0,
				showCar:false
			}
		},
		computed:{
			qsText() {
				let totalPrice = this.getTotal.total,
					text = '',
					reach = false
					if (totalPrice <= 0 || !this.cartList.length) {
						text = '选购商品';
					} else {
						reach = true
						text = '去下单';
					}
				return {
					text,
					reach
				}
			},
			ztqs() {
				return `linear-gradient(90deg, ${util.jjldColor(this.tColor,40)}, ${this.tColor})`
			},
			getTotal() {
				let num = this.cartData.carCount
				let total = this.cartData.carMoney
				return {
					total, //购物车原价
					price: +this.scarList?.price,
					spzj: +(this.scarList?.oldPrice - this.scarList?.boxMoney).toFixed(2),
					bzf: +this.scarList?.boxMoney || 0,
					num
				}
			}
		},
		methods:{
			openCar() {
				this.showCar = true
			},
			itemTotal(v) {
				return +(v.money * v.num).toFixed(2)
			},
			add(e,co){
				this.$emit('add',{addwz:e.addwz,g:co})
			},
			dec(e,co){
				this.$emit('dec',{addwz:e.addwz,g:co})
			},
			goStatement(){
				if(this.cartList.length <= 0 ){
					return
				}
				this.go({
					t:1,
					url:'/yb_shd/dp/OrderDine/statement?tableId=' + this.tableId + '&type=cart'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cartListc {
		padding-bottom: 235rpx;
		.carbody {
			max-height: 600rpx;
		}
	}
	.cartIcon{
		width: 50px;
		font-size: 56rpx;
		height: 50px;
		background: #FFF;
		border-radius: 50%;
		text-align: center;
		line-height: 50px;
	}
	.cartimg {
		// width: 102rpx;
		// height: 145rpx;
		margin-bottom: 30rpx;
	}
	.carc2 {
		width: 100%;
		// padding: 0 4%;
		height: 130rpx;
		bottom: 115rpx;
		background: rgba(255, 255, 255, 0);
		z-index: 2000;
	
		.carleft {
			margin-right: 4%;
	
			.fabv {
				width: 105rpx;
				height: 105rpx;
			}
	
			.fabi {
				background: #000;
				border-radius: 50%;
				transition: transform 150ms cubic-bezier(0.4, 0, 1, 1);
			}
	
			.fabis {
				transform: scale(1) rotate(135deg);
			}
	
			.fabc {
				border-radius: 105rpx;
				padding-top: 30rpx;
				padding-bottom: 105rpx;
				transition: all 0.3s;
				transform: scaleY(0);
				transform-origin: 50% 100%;
				opacity: 0;
				visibility: hidden;
			}
	
			.fabcs {
				opacity: 1;
				transform: scaleY(1);
				visibility: visible;
			}
		}
	
		.car {
			height: 105rpx;
			border-radius: 60rpx;
			// box-shadow: 0px 6rpx 10rpx 0 rgba(#000000, 0.12);
	
			.carh {
				padding: 0 20rpx 0 40rpx;
				height: 70rpx;
			}
	
			.carb {
				// border-radius: 105rpx 0 0 105rpx;
	
				&-img {
					padding-left: 40rpx;
					// width: 105rpx;
	
					.dot {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						// border: 1px solid #fff;
						color: #fff;
						right: -10rpx;
						top: 0;
						transform: translateY(-50%);
					}
				}
			}
	
			.carf {
				// border-radius: 0 60rpx 60rpx 0;
				width: 190rpx;
				height: 100%;
			}
		}
	}
</style>
